<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱哪无忧--聊天室</title>


<link rel="stylesheet" href="stylesheets/bootstrap.min.css" media="screen">


<script src="http://realtime.plhwin.com/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 -->
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="javascripts/jquery.qqFace.js"></script>

<style type="text/css">
	.comment{width:680px; margin:20px auto; position:relative} 
.comment h3{height:28px; line-height:28px} 
.com_form{width:100%; position:relative} 
.input{width:99%; height:60px; border:1px solid #ccc} 
.com_form p{height:28px; line-height:28px; position:relative} 
span.emotion{width:42px; height:20px;  
padding-left:20px; cursor:pointer} 
span.emotion:hover{background-position:2px -28px} 
.qqFace{margin-top:4px;background:#fff;padding:2px;border:1px #dfe6f6 solid;} 
.qqFace table td{padding:0px;} 
.qqFace table td img{cursor:pointer;border:1px #fff solid;} 
.qqFace table td img:hover{border:1px #0066cc solid;} 
#show{width:680px; margin:20px auto}
</style>
</head>

<body>

<div class="container" id="chatbox" style="display:block;">
	<nav class="navbar navbar-default" role="navigation">
	  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <a class="navbar-brand" href="#">Socket聊天室</a>
		      <a href="/profile"><button type="button" class="btn btn-default navbar-btn btn-sm">个人中心</button></a>
		    </div>

		    

		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav navbar-left">
		      </ul>
		      <ul class="nav navbar-nav navbar-right">
		        <li><a href="#" id="showusername"></a></li>
		        <li class="dropdown">
		          <a href="/logout" >退出</a>
		        </li>
		      </ul>
		    </div>
	  </div>
	</nav>

    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-th-list"></span>&nbsp;&nbsp;聊天框&nbsp;&nbsp;<span id="onlinecount"></span></h3>
                </div>
                <div class="panel-body">
	                <div style="height:400px; overflow-x:hidden; overflow-y:scroll;" id="lines">
	                   <div id="chat">
                    			<div id="message" class="message">
                    			</div>
								<div id="onlinecount" style="background:#EFEFF4; font-size:12px; margin-top:10px; margin-left:10px; color:#666;">
								</div>
                    	</div>
	                </div>

	                <div class="btn-group">
	                <form enctype="multipart/form-data" method="post" name="myform">
	                	<input type="file" id="uploadFile" multiple="multiple" accept="image/*" style="display:none" onchange="doUpload()"/> 
	                </form>
					  <button type="button" class="btn btn-default emotion"><i class="glyphicon glyphicon-heart"></i> 表情</button> 
					  <button type="button" class="btn btn-default" id="UploadBtn" onclick="clp()"><i class="glyphicon glyphicon-picture" ></i> 上传图片</button>
					 
					 
					</div>
	                   
                    <div>
                        <div class="form-group">
<!--                             <input type="text" class="form-control" id="content" placeholder="感觉自己萌萌哒?">
 -->                            <div class="form-control" style="min-height:130px" contenteditable="true"  id="content"></div>
                           
                        </div>	
                        <div class="form-input">
                        	 <span class="input-group-btn" ><button style="float:right" class="btn btn-info" type="submit" id = "message" onclick="room.sendMessage()">发送</button></span>

                        </div>	            
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><span class="glyphicon glyphicon-user"></span>用户列表</h3>
                </div>
                <div class="panel-body">
                    <div style="height:434px; overflow-x:hidden; overflow-y:scroll;">
                        <div>
                            <ul class="media" style="padding:10px"  id="nicknames">
                                <!-- <li class="media-left" style="height:50px;">
                                    <img class="media-object" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1020909558,4134438749&fm=21&gp=0.jpg" style="width:35px; height:35px;float:left">
                                    <h4 class="media-left" style="float:left">小莫</h4>
                                </li> --> 
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

       
</div>
									
	<script>
		var room = {}
		room.name = 'nodejs';
	</script>

	<script>

	$(function(){ 
    $('.emotion').qqFace({ 
        assign:'content', //给输入框赋值 
        path:'images/face/'    //表情图片存放的路径 
    }); 
    
});
			

		function clp(){
			return $('#uploadFile').click();
		}


		function doUpload() {
			
			var file = $("#uploadFile")[0].files[0];
		    var form = new FormData();
		    form.append("file", file);

		    $.ajax({
		        url: "/avatar",
		        type: "POST",
		        data: form,
		        async: true,
		        processData: false,
		        contentType: false,
		        success: function(result) {
		            startReq = false;
		            if (result.code == 0) {
		                var url = result.data;
		                var pic = url.substring(7)
		                room.sendImgMessage(pic)
		            }
		        }
		    });
		 	
		}


	</script>


	
	<script>
		
	</script>
	<script src="javascripts/room.js"></script>
	<script src="javascripts/screen.js"></script>
	<script type="text/javascript">
    $('#content').screenshotPaste({
      imgContainer:'#content'
    },function(){
		$("#content > img").css('width','100px')
	});
  </script>
	<script src="javascripts/room.op.js"></script>
	<script src="javascripts/room.event.js"></script>
</body>
</html>
